<template>
	<material-previewer :show="visible" :material="material" :width="width" :height="height"
		v-if="material && material.id"></material-previewer>
</template>

<script>
	import MaterialPreviewer from '@/components/material/previewer.vue';
	export default {
		name: 'material-displayer',
		components: {
			MaterialPreviewer
		},
		props: {
			value: String,
			visible: {
				type: Boolean,
				default: true
			},
			width: { // 宽度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: "70px"
			},
			height: { // 高度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: "70px"
			},
		},
		data() {
			return {
				material: {},
			}
		},
		mounted() {
			if (this.value) {
				this.material = JSON.parse(this.value);
			}
		},
		watch: {
			value(newValue) {
				if (newValue) {
					this.material = JSON.parse(this.value);
				}
			},
		},
	}
</script>

<style>
</style>
